<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">上下文长度</label>
            <div class="layui-input-block">
                <input type="number" name="ctx_len" lay-verify="required" lay-reqtext="上下文长度不能为空"
                       placeholder="请输入上下文长度 512"
                       value="" class="layui-input">
                <tip>填写训练数据时的上下文长度。</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">训练轮数</label>
            <div class="layui-input-block">
                <input type="number" name="n_epoch" lay-verify="required" lay-reqtext="训练轮数不能为空"
                       placeholder="请输入训练轮数 100"
                       value="" class="layui-input">
                <tip>填写训练数据时的训练轮数。</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">批训练条数</label>
            <div class="layui-input-block">
                <input type="number" name="batch_size" lay-verify="required" lay-reqtext="批训练条数不能为空"
                       placeholder="请输入批训练条数 10"
                       value="" class="layui-input">
                <tip>填写训练数据时的批训练条数。</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">模型标记码</label>
            <div class="layui-input-block">
                <input type="text" name="label_id" lay-verify="required" lay-reqtext="模型标记码不能为空"
                       placeholder="标记码"
                       value="" class="layui-input">
                <tip>填写该模型标记码用于关联图书馆</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">模型库名称</label>
            <div class="layui-input-block">
                <input type="text" name="con_name" lay-verify="required" lay-reqtext="模型库名称不能为空"
                       placeholder="模型库名称"
                       value="" class="layui-input">
                <tip>模型库名称</tip>
            </div>
        </div>
        <!--  <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">关联语境库</label>
              <div class="layui-input-block">
                  <select name="label_id" class="labelId" lay-verify="required" lay-reqtext="语境库必须关联">
                      <option value="" class="option">请选择</option>
                  </select>
              </div>
          </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">初始化加载</label>
            <div class="layui-input-block">
                <input type="checkbox" name="init_load" value="1" lay-skin="switch" lay-filter="switchTest"
                       lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">关联图书馆目录</label>
            <div class="layui-input-block">
                <div id="relevancy" class="xm-select-demo"></div>
                <tip>关联图书馆目录</tip>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    let changeData = []

    layui.use(['form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;

        let xmselect = xmSelect.render({
            el: '#relevancy',               // dom节点
            tips: '请选择关联的图书馆目录',     // tips提示
            direction: 'auto',              // 下拉方向
            // height: '300px',                // 下拉框高度
            prop: {
                name: 'name',
                value: 'code'
            },
            theme: {                        // 主题颜色
                color: '#0081ff',
            },
            autoRow: true,                  // 开启换行
            data: [],                       // 数据
            tree: {
                //是否显示树状结构
                show: true,
                //是否展示三角图标
                showFolderIcon: true,
                //是否显示虚线
                showLine: false,
                //间距
                indent: 30,
                //是否严格遵守父子模式
                // strict: true,
                //是否开启极简模式
                simple: true,
                //开启懒加载
                lazy: true,
                //加载方法
                load: function (item, cb) {
                    //item: 点击的节点, cb: 回调函数
                    //这里模拟ajax
                    let pid = item.id
                    $.post('/admin/categories', {
                        pid
                    }, function (res) {
                        cb(res.data)
                    })
                }
            },
            on: function (data) {           // 监听事件
                // console.log(data)
                //arr:  当前多选已选中的数据
                changeData = data.arr
                //change, 此次选择变化的数据,数组
                // let change = data.change;
                //isAdd, 此次操作是新增还是删除
                // let isAdd = data.isAdd;
                //return []
            },
        })

        $.get('/admin/libraryList', function (res) {
            if (res.code === 0) {
                for (let i = 0; i < res.data.length; i++) {
                    let text = '<optgroup label="' + res.data[i].con_name + '">'
                    let child = res.data[i].child;
                    for (let j = 0; j < child.length; j++) {
                        text += '<option value="' + child[j].label_id + '">' + child[j].con_name + '</option>'
                    }
                    text += '</optgroup>'
                    $('.option').after(text)
                }
                // 重新渲染表单
                form.render('select')
            }
        })

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        //监听提交
        form.on('submit(saveBtn)', function (data) {

            for (let i = 0; i < changeData.length; i++) {
                changeData[i]['__node'] = null
            }
            let params = data.field
            params['relevancy'] = changeData

            console.log(JSON.stringify(params))


            $.ajax({
                dataType: "json",
                type: 'POST',
                url: '/admin/modules/add/2',
                contentType: 'application/json',
                data: JSON.stringify(params),
                success: function (res) {
                    layer.close(parentIndex);
                }
            });
            // var index = layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // }, function () {
            //
            //     // 关闭弹出层
            //     layer.close(index);
            //     layer.close(parentIndex);
            //
            // });

            event.stopPropagation();
            return false;
        });
        $.post('/admin/categories', {}, function (res) {
            console.log(res.data)
            xmselect.update({
                data: res.data
            })
        })
    });


</script>